<template>
  <div>
      <div class="top_box">
      <router-link to="/login" class="touxiang">
      <img src="../../static/user/avatar.png" class="user">
      <span>点击登录</span>
      <a>登录开启小说云同步</a>
      </router-link>
            <div class="wode_item" v-for="(item,i) in wode_item" :key="i">
                    <p>{{item}} <span class="iconfont icon-icon_next_arrow"></span></p>
            </div>
        </div>
        </div>
</template>

<script>

export default {
  data () {
    return {
      wode_item: [
        '账户信息', '超级会员', '听说下载', '我的签到', '帮助与反馈'
      ]
    }
  }
}
</script>
<style scoped>
/* wode */
.top_box{
    position: relative;
    top: 50px
}
.touxiang span{
    color: white;
    position: absolute;
    top: 16%;
    font-size: 20px;
}
.touxiang a{
    position: absolute;
    top: 25%;
    color: white;
    font-size: 12px;
}
.touxiang{
    width: 100%;
    display: block;
    height: 150px;
    background:#1296db;
    border-top: white 1px solid;
}
.touxiang img{
    padding: 20px 40px;
    width: 30%;
    }
.wode_item{
    width: 100%;
    border-top: 1px solid #CCC;
}
.wode_item p{
    height: 50px;
    border-bottom: 1px solid #CCC;
    padding: 0 20px 0 10%;
    line-height: 50px;
}
.iconfont{
    float: right;
    color: rgb(124, 124, 124);
}
</style>
